<template>
  <el-row>
    <h1>iOS-json生成model</h1>
    <div class="radioView">
      <el-radio v-model="radio" label="1" v-on:change="changeRadioVual()">Swift</el-radio>
      <el-radio v-model="radio" label="2" v-on:change="changeRadioVual()">Objective-C</el-radio>
    </div>
    <el-col :span="10">
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 31, maxRows: 31}" placeholder="请输入内容"
                 v-model="inputTextarea">
      </el-input>
    </el-col>
    <el-col :span="5" class="createBtn">
      <el-button type="primary" v-on:click="getModelContent">转化</el-button>
    </el-col>
    <el-col :span="10" v-show="radio === '2'">
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 15, maxRows: 15}"  placeholder="输出"
                 v-model="outputTextareaH" class="outputTextareaH">
      </el-input>
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 15, maxRows: 15}" placeholder="输出"
                 v-model="outputTextareaM" >
      </el-input>
    </el-col>

    <el-col :span="10" v-show="radio === '1'">
      <el-input  type="textarea" resize="none" :autosize="{ minRows: 31, maxRows: 31}"  placeholder="输出"
                 v-model="outputTextareaS">
      </el-input>
    </el-col>
  </el-row>

</template>

<script>

  import { getApplinziIiOSModel  } from '../../api/httpApi'

    export default {
      name: "iOSModel",
      data() {
        return {
          inputTextarea: '',
          outputTextareaH: '',
          outputTextareaM: '',
          outputTextareaS: '',
          radio: '1'
        }
      },
      created() {
        // 初始化
        console.log("created");

      },
      mounted() {
        // 延迟方法
        console.log("mounted");
        //this.getModelContent()
      },
      beforeUpdate() {
        // 事件变化前
        console.log("beforeUpdate");
      },
      updated() {
        // 事件变化
        console.log("updated");
      },
      beforeDestory() {
        // 销毁
        console.log("beforeDestory");
      },
      methods: {
        changeRadioVual(){
          this.outputTextareaH = ""
          this.outputTextareaM = ""
          this.outputTextareaS = ""
        },
        // 方法
        getModelContent() {

          var data = {
            curl: this.inputTextarea ,
            radio: this.radio
          }
          getApplinziIiOSModel(data).then((res)=>{
            var rt = res.data;
            if (rt.code === 0){
              var data = rt.data
              console.log(data);
              this.outputTextareaH = data.head
              this.outputTextareaM = data.model
              this.outputTextareaS = data.model
            }
          })


        }
      }
    }
</script>

<style scoped>
.createBtn{
  width: 16%;
  align-content: center;
  text-align: center;
  margin-top: 320px;

}
  h1{
    text-align: center;
    color: #333333;
    font-size: 2rem;
    margin-bottom: 20px;
  }
  .radioView{
    display: block;
    height: 30px;
    text-align: center;
  }
  .outputTextareaH{
    margin-bottom: 10px;
  }
</style>
